<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>仁爱宠物医院</title>
  <link rel="stylesheet" href="../css/home.css">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://www.jq22.com/demo/number202111050044/js/number.js"></script>
</head>

<body>
  <div id="register">
    <!-- 页面头部 -->
    <header>
      <div style="display: flex;">
        <div class="container">
          <div class="row">
            <div class="col-lg-1" style="text-align: right;">
              <img src="../img/cat-foot.svg" height="40px" width="40px" />
            </div>
            <div class="col-lg-2" style="padding: 0;text-align: left;color: #ff5b2e;padding-top: 3px;">
              <h3 style="font-weight: 700; font-family: 得意黑;">仁爱宠物医院</h3>
            </div>
            <div class="col-lg-7">
              <ul style="font-family: 得意黑;">
                <li class="li_header"><a class="a_header" href="./home.html">首页</a></li>
                <li class="li_header"><a class="a_header" href="./about.html">关于仁爱</a></li>
                <li class="li_header"><a class="a_header" href="./service.html">服务项目</a></li>
                <li class="li_header"><a class="a_header" href="./keep_a_pet.html">养宠小百科</a></li>
                <li class="li_header"><a class="a_header" href="./join_us.html">加入我们</a></li>
                <li class="li_header"><a class="a_header" href="./shop.html">线上商店</a></li>
                <li class="li_header"><a class="a_header" href="./message.html">在线留言</a></li>
                <li class="li_header"><a class="a_header" href="./login.html">登录/注册</a></li>
              </ul>
            </div>
            <div class="col-lg-2" style="text-align: left;overflow: hidden; position: relative;">
              <input type="text" style="margin-top: 8px;" v-model="name">
              <img @click="search()" src="../img/search.png" alt="" width="23px" height="23px"
                style="position: absolute; top: 11px; left: 135px; cursor: pointer;">
            </div>
          </div>
        </div>
      </div>
    </header>
    <!-- 注册 -->
    <section
      style="position: relative; background: url(../img/resgister.jfif) no-repeat;background-size: 100% 100%; width: 100%; padding: 10% 0;">
      <div
        style="width: 30%; height: 400px; background-color: #fff;border-radius: 20px; margin: auto;overflow: hidden;">
        <div style="text-align: center;margin-top: 5%;">
          <h3 style="margin-bottom: 5%;">用户注册</h3>
          <form action="#">
            <label for="account">账号：</label><input style="padding-left: 15px; height: 40px; width: 70%;" type="text"
              name="account" id="account" placeholder="请输入账号"><br><br>
            <label for="password">密码：</label><input style="padding-left: 15px; height: 40px; width: 70%;"
              type="password" name="password" id="password" placeholder="请输入密码"><br><br>
            <label for="password_2">确认密码：</label><input style="padding-left: 15px; height: 40px; width: 70%;"
              type="password" name="password_2" id="password_2" placeholder="请再次输入密码">
            <h3 onclick="register()" style="text-align: center; margin-top: 2%;"><input
                style="height: 45px; font-size: 18px;" type="button" value="注册"></h3>
          </form>
          <div>
            <span>已有账号？<a href="./login.html">立即登录</a></span>
          </div>
        </div>
      </div>
    </section>
    <!-- 页尾 -->
    <footer style="background-color: #2f2d53;height: 350px; overflow: hidden; padding-top: 5%;">
      <div class="container">
        <div style="display: flex; padding-left: 20%;">
          <div style="width: 35%;">
            <div style="display: flex;">
              <div style="text-align: right;">
                <img src="../img/cat-foot.svg" height="40px" width="40px" />
              </div>
              <div style="padding: 0;text-align: left;color: #ff5b2e;padding-top: 3px;">
                <h3 style="font-weight: 700; font-family: 得意黑;">仁爱宠物医院</h3>
              </div>
            </div>
            <div style="color: #fff; margin-top: 5%;">
              <span>
                宠物护理和兽医服务对于维持<br>我们心爱的动物伴侣的健康和福祉至关重要
              </span>
            </div>
          </div>
          <div style="display: flex; width: 65%;">
            <div style="overflow: hidden; margin-left: 15%;">
              <h4 style="color: #fff;">快速链接</h4><br>
              <h6><a style="color: #fff !important;" href="./about.html">关于我们</a></h6><br>
              <h6><a style="color: #fff !important;" href="./service.html">服务项目</a></h6><br>
              <h6><a style="color: #fff !important;" href="./service.html">线上商店</a></h6>
            </div>
            <div style="overflow: hidden; margin-left: 15%;">
              <h4 style="color: #fff;">法律</h4><br>
              <h6 style="color: #fff;">常见问题</h6><br>
              <h6 style="color: #fff;">条款及细则</h6><br>
              <h6 style="color: #fff;">隐私与政策</h6>
            </div>
          </div>
        </div>
        <span style="color: #fff; display: block; text-align: center; font-size: 14px; margin-top: 2%;">©2024年
          版权所有仁爱宠物医院</span>
      </div>
    </footer>
  </div>
</body>
<script>
  // 发送登录请求
  function register() {
    // 获取账号
    let account = document.getElementById("account").value;
    // 获取密码
    let password = document.getElementById("password").value;
    let password_2 = document.getElementById("password_2").value;
    if (password !== password_2) {
      // 表示两次密码输入的不一样
      alert("两次密码不一致");
      return;
    } else {
      // 放入对象
      let user = {
        "account": account,
        "password": password,
      }
      $.ajax({
        type: "POST",
        url: "http://localhost:8082/user/register",
        dataType: "json",
        contentType: "application/json",
        data: JSON.stringify(user),
        success: function (data) {
          if (data.flag) {
            // 注册成功跳转登录页面
            alert("注册成功！");
            window.location.href = './login.html';
          } else {
            alert(data.message);
          }
        },
      })
    }
  }
</script>
<script>
  new Vue({
    el: '#register',
    data() {
      return {
        name: ''
      }
    },
    methods: {
      search() {
        localStorage.setItem("name", this.name);
        window.location.href = './shop.html'
      }
    }
  })
</script>

</html>